<template>
    <div id="login-page">
        <van-nav-bar
            title="登陆页"
            left-text="返回"
            right-text="注册"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />
        <van-cell-group>
            <van-field type="text" v-model="username" label="账号"
                       placeholder="请输入账号"
                       left-icon="contact" clearable required />
            <van-field type="password" v-model="password" label="密码"
                       placeholder="请输入密码"
                       left-icon="closed-eye" clearable required />
<!--                    <van-password-input :value="value" info="请输入密码" />-->
            <div>
                <van-row type="flex" justify="center">
                    <van-col span="8" style="margin-right:2px;">
                        <van-button type="primary" size="large" @click="login">登录</van-button>
                    </van-col>
                    <van-col span="8">
                        <van-button type="warning" size="large" @click="register">手机快速注册</van-button>
                    </van-col>
                </van-row>
            </div>
        </van-cell-group>
        </div>

</template>

<script>
    import {NavBar, CellGroup, Field, Col, Row, Button, Toast} from 'vant';
    import axios from 'axios';

    export default {
        name: "login",
        components: {
            'van-nav-bar':NavBar,
            'van-field':Field,
            // 'van-password-input':PasswordInput,
            'van-cell-group':CellGroup,
            'van-row':Row,
            'van-col':Col,
            'van-button':Button
        },
        data(){
          return{
              username: 'admin',
              password: 'admin'
          }
        },
        beforeRouteEnter:(to,from,next) =>{
          //组件内守卫
          //已登录状态回到登录界面，即 登出
          next(vm => {
            vm.$store.dispatch("setUser",null);
            });
        },
        methods:{
            onClickLeft() {
                  Toast('返回');
                  this.$router.push({ path:'/home'});
                },
            onClickRight() {
                this.$toast('请填写注册信息');
                this.$router.push({ path:'/register'});
              },
            register(){
                //通过push进行跳转
                this.$router.push('/register')
            },
            login(){
                let self = this
                if(self.username == ''){
                  self.$toast("用户名不能为空");
                  return false;
                }
                if(self.password == ''){
                  self.$toast("密码不能为空");
                  return false;
                }
                else {
                    axios.get('/login/',
                        {
                            params: {
                            userName: self.username
                            }
                    })
                }
            }
        }
    }
</script>

<style scoped lang="less">

</style>